<script lang="ts" setup>
import { AuditOutlined } from '@ant-design/icons-vue'
import { h, reactive, ref } from 'vue'
import to from '@/utils/awaitTo'
import Api from '@/api/'
import { Pagination } from '@/components/basic/Pagination'
import { message } from 'ant-design-vue'
import { download } from '@/utils/utils'
import { SearchCard } from '@/components/basic/Card'


// 响应式数据
const queryParams = reactive({
  firstClassificationIds: [],
  containsDeleted: false,
  contentCreateUserId: 0,
  createBy: '',
  doctorId: 0,
  topicStatus: '1001',
  topicType: '',
  excludeTopicIds: [],
  isAppSearch: false,
  keyword: '',
  keywordId: 0,
  keywordIds: [],
  keywordKeyword: '',
  orTopicIds: [],
  pageDTO: {
    columns: [],
    orders: [],
    pageNum: 1,
    pageSize: 10
  },
  queryS: [],
  secondClassificationIds: [],
  thirdClassificationIds: [],
  secondClassificationId: '',
  secondClassificationName: '',
  topicIds: [],
  topicTitles: [],
  shouldUserName: true
})
const formRef = ref()
const loading = ref(false)
const list = ref([])
const total = ref(0)


/** 列表方法 */
const getList = async () => {
  loading.value = true
  const [error, data] = await to(Api.tpbase.topicExamineList(queryParams))
  loading.value = false
  if (!error) {
    list.value = data.list.map((item) => {
      return {
        ...item,
        key: item.topicId
      }
    })
    total.value = Number(data.total)
  }
}

// 表格参数属性
const rowSelection = ref({
  checkStrictly: false,
  onChange: (selectedRowKeys) => {
    auditData.disabled = selectedRowKeys.length ? false : true
    auditData.form.auditTopicIds = selectedRowKeys
    exportData.disabled = selectedRowKeys.length ? false : true
    // queryParams.topicIds = selectedRowKeys
  }
})


/** 审核事件 */
const formAuditRef = ref()
const auditData = reactive({
  loading: false,
  open: false,
  disabled: true,
  title: '',
  form: {
    auditRes: '', // 审核结果
    topicLabel: '', // 是否有热度
    sourceImageUrl: '', // 来源图片
    topicType: '', // 话题类型
    auditTopicIds: [], // 话题ids
    status: 0, // 话题状态 0默认 1单个 2批量
    topicIds: [], //导出参数
    failMsg: '',
    topicHyperlink: ''
  },
  rules: {
    auditRes: [{ required: true, message: '请选择审核结果', trigger: 'blur' }]
  }
})

// 单个审核事件
const handleAudit = (record) => {
  reset()
  auditData.open = true
  auditData.title = '话题审核'
  auditData.form.auditTopicIds = new Array(record.topicId) // 话题ids
  auditData.form.sourceImageUrl = record.sourceImageUrl // 来源图片
  auditData.form.topicHyperlink = record.topicHyperlink //话题超链接
  auditData.form.topicType = record.topicType // 话题类型
  auditData.form.status = 1 // 话题状态
}

// 批量审核
const handleBatchAudit = () => {
  auditData.title = '批量话题审核'
  auditData.open = true //   打开
  auditData.form.status = 2
}

// 审核提交
const handleSubmit = () => {
  formAuditRef.value
    .validate()
    .then(async (values) => {
      const params = Object.assign({}, auditData.form, values)
      auditData.loading = true
      const [error] = await to(Api.tpbase.topicExamine(params))
      if (!error) {
        auditData.loading = false
        auditData.open = false
        message.success('审核完成')
        setTimeout(() => {
          getList()
        }, 2000)
      }
    })
}


// 重置
const reset = () => {
  auditData.form = {
    auditRes: '', // 审核结果
    topicLabel: '', // 是否有热度
    sourceImageUrl: '', // 来源图片
    topicType: '', // 话题类型
    auditTopicIds: [], // 话题ids
    status: 0, // 话题状态 0默认 1单个 2批量
    topicIds: [], //导出参数
    failMsg: '',
    topicHyperlink: ''
  }
}


/** 导出 */
const exportData = reactive({
  disabled: true
})
const handleExport = async () => {
  const params = JSON.parse(JSON.stringify(queryParams))
  params.pageDTO.pageSize = total.value
  params.pageDTO.pageNum = 1
  console.log(params)
  const [error, data] = await to(Api.tpbase.topicExport(params))
  if (!error) {
    download(data, '话题审核导出')
  }
}

/** 用户方法  */
// 创建用户列表
const getCreatdUserList = ref([])
// 创建用户
const getCreatdUser = async () => {
  const [error, data] = await to(Api.tpbase.topicCreatdUser({}))
  if (!error) {
    getCreatdUserList.value = data
  }
}
// 下拉框字段
const fieldNames = reactive({
  label: 'nickName',
  value: 'userId'
})


/** 科室数据 */
const depData = reactive({
  list: [],
  queryParams: {},
  fetching: false
})
const departmentList = async () => {
  const [error, data] = await to(Api.tpbase.topicDepartmentList(depData.queryParams))
  if (!error) {
    depData.list = data
  }
}


/** 搜索 */
// 重置表单
const resetForm = () => {
  formRef.value.resetFields()
  getList()
}


/** 审核状态字典 */
const TopicAuditTypeDict = [
  {
    label: '通过',
    value: '1'
  },
  {
    label: '不通过',
    value: '2'
  }
]

/** 驳回原因 */
const CauseRejectionDict = [
  {
    label: '话题内容和提交图片或链接不符',
    value: '1'
  },
  {
    label: '未达到话题录入标准',
    value: '2'
  }
]

/** 话题来源 */
const TopicSourceDict = [
  {
    label: '平台新增',
    value: 1001
  },
  {
    label: '用户自建',
    value: 1002
  }
]

/** 是否有热度  */
const isHotDict = [
  {
    label: '是',
    value: 'hot'
  },
  {
    label: '否',
    value: ''
  }
]

// 表格列
const columns = [
  {
    title: '话题',
    dataIndex: 'topicTitle',
    key: 'topicTitle',
    align: 'center'
  },
  {
    title: '所属分类',
    dataIndex: 'secondClassificationName',
    key: 'secondClassificationName',
    align: 'center'
  },
  {
    title: '话题来源',
    dataIndex: 'topic-source',
    key: 'topic-source',
    align: 'center'
  },
  {
    title: '话题状态',
    dataIndex: 'topicStatus',
    key: 'topicStatus',
    align: 'center'
  },
  {
    title: '话题来源图片',
    dataIndex: 'topic-source-img',
    key: 'topic-source-img',
    align: 'center'
  },
  {
    title: '话题超链接',
    dataIndex: 'topic-hyperlink',
    key: 'topic-hyperlink',
    align: 'center'
  },
  {
    title: '创建用户',
    dataIndex: 'nickName',
    key: 'nickName',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    align: 'center'
  }
]

/***  话题状态 */
const topicStatusDict = [
  {
    label: '待审核',
    value: '1001'
  },
  {
    label: '审核通过',
    value: '1002'
  },
  {
    label: '审核驳回',
    value: '1003'
  },
  {
    label: '待修改',
    value: '1004'
  }
]


getList()
getCreatdUser()
departmentList()
</script>

<template>
  <div>
    <!-- 搜索 -->
    <SearchCard>
      <a-form ref="formRef" :model="queryParams" layout="inline">
        <a-form-item label="创建用户" name="createBy">
          <a-select
            v-model:value="queryParams.createBy"
            :fieldNames="fieldNames"
            :options="getCreatdUserList"
            placeholder="创建用户"
            style="width: 220px"
            @change="getList"
          />
        </a-form-item>

        <a-form-item label="话题来源" name="topicType">
          <a-select
            v-model:value="queryParams.topicType"
            :options="TopicSourceDict"
            placeholder="请输入话题来源"
            style="width: 220px"
            @change="getList"
          />
        </a-form-item>

        <a-form-item label="科室" name="firstClassificationIds">
          <a-select
            v-model:value="queryParams.firstClassificationIds"
            :fieldNames="{
            label: 'name',
            value: 'id',
            options: 'options',
          }"
            :options="depData.list"
            :show-search="true"
            mode="multiple"
            placeholder="请选择科室"
            style="width: 220px"
            @change="getList"
          >
          </a-select>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" @click="getList()">搜索</a-button>
          <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
        </a-form-item>
      </a-form>
    </SearchCard>


    <!-- 表格 -->
    <a-card>
      <template #title>
        <a-space>
          <a-button :disabled="auditData.disabled" type="primary" @click="handleBatchAudit">批量审核</a-button>
          <a-button :disabled="exportData.disabled" type="primary" @click="handleExport">导出</a-button>
        </a-space>
      </template>

      <template #default>
        <a-table :columns="columns" :dataSource="list" :loading="loading" :pagination="false"
                 :row-selection="rowSelection">
          <!-- 头部 ¬-->
          <template #headerCell="{ column }">
            <template v-if="column.key === 'operation'">
              <a-button :icon="h(AuditOutlined)">操作</a-button>
            </template>
          </template>

          <!-- 底部 -->
          <template #bodyCell="{ column, record }">
            <!-- 话题来源 -->
            <template v-if="column.key === 'topic-source'">
              <!--              {{ topicSourceEnum(record) }}-->
            </template>

            <!-- 话题状态 -->
            <template v-if="column.key === 'topicStatus'">
              <span>
                <template v-for="item in topicStatusDict" :key="item.value">
                  <span v-if="item.value === record.topicStatus">{{
                      item.label
                    }}</span>
                </template>
              </span>
            </template>

            <!-- 话题来源图片 -->
            <template v-if="column.key === 'topic-source-img'">
              <template v-if="Number(record.topicType) === 1001">
                <a-image
                  :src="record.sourceImageUrl"
                  style="width: 100px"
                  width="100"
                />
              </template>
              <template v-else-if="Number(record.topicType) === 1002">
                <span>/</span>
              </template>
            </template>

            <!-- 话题超链接 -->
            <template v-if="column.key === 'topic-hyperlink'">
              <a
                v-if="Number(record.topicType) === 1001"
                :href="record.topicHyperlink"
                target="_blank"
              >点击查看</a
              >
              <div v-else-if="Number(record.topicType) === 1002">/</div>
            </template>


            <!-- 操作 -->
            <template v-if="column.key === 'operation'">
              <a-button
                :icon="h(AuditOutlined)"
                type="primary"
                @click="handleAudit(record)"
              >审核
              </a-button
              >
            </template>
          </template>
        </a-table>

        <Pagination
          v-model:pageNum="queryParams.pageDTO.pageNum"
          v-model:pageSize="queryParams.pageDTO.pageSize"
          :total="total"
          class="flex justify-end mt-3"
          @pagination="getList()"
        />

      </template>
    </a-card>

    <!-- 审核弹出框 -->
    <a-modal v-model:open="auditData.open" :ok-button-props="{ loading: auditData.loading }" :title="auditData.title"
             @ok="handleSubmit">
      <a-form ref="formAuditRef" :model="auditData.form" :rules="auditData.rules">
        <!-- 审核状态   -->
        <a-form-item label="审核状态" name="auditRes">
          <a-radio-group v-model:value="auditData.form.auditRes">
            <a-radio-button
              v-for="item in TopicAuditTypeDict"
              :key="item.value"
              :value="item.value"
            >{{ item.label }}
            </a-radio-button>
          </a-radio-group>
        </a-form-item>

        <!--  驳回原因  -->
        <a-form-item
          v-if="Number(auditData.form.auditRes) === 2"
          label="驳回原因"
          name="failMsg"
        >
          <a-radio-group v-model:value="auditData.form.failMsg">
            <a-space wrap>
              <a-radio
                v-for="item in CauseRejectionDict"
                :key="item.value"
                :value="item.value"
              >{{ item.label }}
              </a-radio
              >
            </a-space>
          </a-radio-group>
        </a-form-item>

        <!--  是否有热度  -->
        <a-form-item label="是否有热度" name="topicLabel">
          <a-radio-group v-model:value="auditData.form.topicLabel">
            <a-radio
              v-for="item in isHotDict"
              :key="item.value"
              :value="item.value"
            >{{ item.label }}
            </a-radio>
          </a-radio-group>
        </a-form-item>

        <!-- 话题来源图片 -->
        <a-form-item v-if="Number(auditData.form.status) === 1" label="话题来源图片">
          <template v-if="Number(auditData.form.topicType) === 1001">
            <a-image
              :src="auditData.form.sourceImageUrl"
              style="width: 100px"
              width="100"
            />
          </template>
          <template v-else-if="Number(auditData.form.topicType) === 1002">
            <span>/</span>
          </template>
        </a-form-item>

        <a-form-item v-if="Number(auditData.form.status) === 1" label="话题超链接">
          <a
            v-if="Number(auditData.form.topicType) === 1001"
            :href="auditData.form.topicHyperlink"
            target="_blank"
          >查看链接</a>
          <div v-else-if="Number(auditData.form.topicType) === 1002">/</div>
        </a-form-item>
      </a-form>
    </a-modal>

  </div>
</template>

<style lang="less" scoped>

</style>
